<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<title>Test Web Cam</title>
<style type="text/css">
    #webcam, #canvas {
        width: 320px;
        border:20px solid #39A3DD;
        background:#eee;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }

    #webcam {

        margin-top:-21px;
        margin-bottom:50px;
        z-index: 1000;
        margin-right:4px;
    }
    #webcam  span {
        bottom: -16px;
        color: #FFFFFF;
        font-size: 10px;
        left: 132px;
        position: absolute;
        top: 264px;
        z-index: 2;
        height: 20px;
    }

    #canvas {    border:20px solid #ccc;
                 background:#eee;
    }
    .takepic{
        background: url("../images/camera.png") repeat scroll 0 0 transparent !important;
    float: left !important;
    height: 29px;
    margin-left: 182px;
    margin-top: -44px;
    width: 29px;
    cursor: pointer;
    }
</style>


</head><body>
    <p id="status" style="height:22px; color:#c00;font-weight:bold;"></p>
    <div id="webcam">
        
    </div>

    <p style="width:360px;text-align:center; ">
       <%-- <a href="javascript:webcam.capture(3);void(0);">Take a picture after 3 seconds</a> |--%>
    
       <a href="javascript:webcam.capture();void(0);" class="takepic" title="Take a picture"></a></p>

    <script type="text/javascript">
        var pos = 0;
        var ctx = null;
        var cam = null;
        var image = null;

        var filter_on = false;
        var filter_id = 0;

        var open_cur = 0;
        $j = jQuery.noConflict();
//        function dataURItoBlob(dataURI, callback) {
//            // convert base64 to raw binary data held in a string
//            // doesn't handle URLEncoded DataURIs
//
//            var byteString;
//            if (dataURI.split(',')[0].indexOf('base64') >= 0) {
//                byteString = atob(dataURI.split(',')[1]);
//            } else {
//                byteString = unescape(dataURI.split(',')[1]);
//            }
//
//            // separate out the mime component
//            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
//
//            // write the bytes of the string to an ArrayBuffer
//            var ab = new ArrayBuffer(byteString.length);
//            var ia = new Uint8Array(ab);
//            for (var i = 0; i < byteString.length; i++) {
//                ia[i] = byteString.charCodeAt(i);
//            }
//
//            // write the ArrayBuffer to a blob, and you're done
//            var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
//            var bb = new BlobBuilder();
//            bb.append(ab);
//            return bb.getBlob(mimeString);
//        }

       

        $j(document).ready(function(){

            var pos = 0, ctx = null, saveCB, image = [];
            var canvas = document.createElement("canvas");
            var img64 = null;
            canvas.setAttribute('width', 320);
            canvas.setAttribute('height', 240); 
            if (canvas.toDataURL) {
                ctx = canvas.getContext("2d");             
                image = ctx.getImageData(0, 0, 320, 240);
                saveCB = function(data) {                       
                    var col = data.split(";");
                    var img = image;
                    for(var i = 0; i < 320; i++) {
                        var tmp = parseInt(col[i]);
                        img.data[pos + 0] = (tmp >> 16) & 0xff;
                        img.data[pos + 1] = (tmp >> 8) & 0xff;
                        img.data[pos + 2] = tmp & 0xff;
                        img.data[pos + 3] = 0xff;
                        pos+= 4;
                    }
                    
                    if (pos >= 4 * 320 * 240) {
                        var temp ='';
                        pn100  = $j('#pn100').val();
                       
                        ctx.putImageData(img, 0, 0);
                     //   var blobimg = getAsJPEGBlob(canvas);
                        // alert(blobimg);
                        var dataURL = canvas.toDataURL('image/png;base64'); 
                        var image64 = dataURL.replace(/data:image\/png;base64,/, '');
                         temp ='<img src="'+dataURL+'" alt=""/>';
                        $j('.demo').append(temp);
                       
                        $j.post("webcameupload.jsp?action=webcame&pn100="+pn100, {type: "data", image:dataURL});
                        pos = 0;
                    }
                     $j('.scapture').css('visibility','hidden');
                  
                };
            } else {
                saveCB = function(data) {
                    image.push(data);                       
                    pos+= 4 * 320;                       
                    if (pos >= 4 * 320 * 240) {
                        $j.post("webcameupload.jsp?action=webcame", {type: "pixel", image: image.join('|')});
                        pos = 0;
                    }
                };
            }
            $j("#webcam").webcam({
                width: 320,
                height: 240,
                mode: "callback",
                swffile: "../scripts/webcame/jscam_canvas_only.swf",
                onSave: saveCB,
                onCapture: function () {
                    webcam.save();
                },
                debug: function (type, string) {
                    console.log(type + ": " + string);
                }
            });

        });
    </script>
    <f:view><h:inputHidden value="#{uploadLogoController.pn100}" id="pn100"/></f:view>
    <div class="demo">	
        <%--<img src="" alt=""/>--%>
    </div>
</body>

</html>
